<template>
    <!--预警-->
    <div class="early_warning">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="监测信息" name="first"></el-tab-pane>
            <el-tab-pane label="历史数据" name="second"></el-tab-pane>
        </el-tabs>
        <component :is="componentItem"></component>
        <div class="alert_details">预警详情</div>
    </div>
</template>

<script lang="ts" setup>
import { ref, markRaw } from 'vue';
import type { Component } from 'vue';
import CustomSafetySpyModalEarlywarningComponentsHistorical from './components/historical.vue';
import CustomSafetySpyModalEarlywarningComponentsMonitoringInfor from './components/MonitoringInfor.vue';

const activeName = ref('first');
const componentItem = ref<Component>(CustomSafetySpyModalEarlywarningComponentsMonitoringInfor);
const handleClick = (tab, event) => {
    const obj = {
        first: CustomSafetySpyModalEarlywarningComponentsMonitoringInfor,
        second: CustomSafetySpyModalEarlywarningComponentsHistorical
    };
    componentItem.value = markRaw(obj[tab.paneName]);
};
</script>
<style scoped lang="scss">
.early_warning {
    padding: 16px 34px;
    position: relative;
    ::v-deep(.el-tabs__item) {
        font-size: 18px;
        color: #ffffff;
        &:hover {
            color: #0e96ff;
        }
    }
    ::v-deep(.el-tabs__item.is-active) {
        color: #0e96ff;
    }

    ::v-deep(.el-tabs__nav-wrap)::after {
        background-color: rgba(14, 150, 255, 0.29);
    }
    .alert_details {
        position: absolute;
        top: 16px;
        right: 36px;
        width: 88px;
        height: 28px;
        background: #fbce05;
        border-radius: 4px;
        font-size: 14px;
        color: #08233a;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
}
</style>
